<html> 
    <head> 
        <title></title> 
        <link rel="stylesheet" type="text/css" href="css/present.css" /> 
<script type="text/javascript">
$(function() {
   $(".hide").hide();
   sub = { index:0, steps: [], step: function() {sub.steps[sub.index++]();}};
   sub.next= function () { return sub.index >= sub.steps.length };

   sub.steps.push(function() {$(".step1").show();});
   sub.steps.push(function() {$(".step1").animate({'height': 0, 'width': 0}, 1000
                , function() { $(this).hide(); $(".step1").hide();
       stretchSketch = StretchSketch.load({url: 'jsMeetup.jsvg', controlPanel: $('#below')});
    $(".step2").show();})});
});
</script>

    </head> 
<body class="jsxgraph_body">
<div class="step1">
<pre>
&lt;svg xmlns="http://www.w3.org/2000/svg" version="1.1"  baseProfile="full" 
viewbox="0 0 220 250">
@{var: nk.x, defaultvalue: 57, label: width, type:slider, max:100, min:0, step:1, size:3}
@{var: nk.y,  defaultvalue: 50, label: depth, type:slider, max:100, min:0, step:1, size:3}
@{var: nk.thk, defaultvalue: 1.2, label: sheet thickness, type:slider, max:3, min:0, step:0.05, size:3}
@{var: nk.br, defaultvalue: 0.22, label: bit radius, type:slider, max:1, min:0, step:0.01, size:3}
${
   nk.topBezel = 10;
   nk.fc = 0.1;
   
   nk.topEdge = new iPath().setSettings({make_hole: true, pens_height: -nk.thk
, preferred_pen_length: nk.ppl, bit_radius: nk.br, modify_end_point: true
, fit_correction: nk.fc})
      .boxEdge(0,nk.y).move(nk.x,0).boxEdge(0,-nk.y).boxEdge(-nk.x, 0)
      .move(-nk.topBezel,-nk.topBezel).line(0,nk.y+2*nk.topBezel).line(nk.topBezel,0)
      .boxEdge(nk.x,0, {make_hole: false, pens_height: nk.thk}).line(nk.topBezel,0).line(0,-nk.y-2*nk.topBezel)
.line(-nk.x-2*nk.topBezel,0);
$}
&lt;g stroke="black" stroke-width="0.1" fill="none" transform="scale(1)">
&lt;path id="separator" class="no" d="M 100 110 #{nk.topEdge.dPath(3)}" />
&lt;/g>
&lt;/svg>
<pre>
</div>
<div class="step2 hide">
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1">  </svg>
<div id="below">
</div>
</div>
</body>
</html>
